<template>
  <div>
    <div>
      <a-form-item label='产品主图' v-bind="formItemLayout">
        <a-upload
          :action="actionUrl"
          listType="picture-card"
          :fileList="fileListM"
          @preview="handlePreviewM"
          @change="handleChangeM"
          :headers="headers"
        >
          <div v-if="fileListM.length < 1">
            <a-icon type="plus"/>
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
        <a-modal :visible="previewVisibleM" :footer="null" @cancel="handleCancelM">
          <img alt="example" style="width: 100%" :src="previewImageM"/>
        </a-modal>
      </a-form-item>

      <a-form-item label='图片包URL' v-bind="formItemLayout">
        <a-input v-model="maaFile.maa19" style="width: 100%"/>
      </a-form-item>
      <a-form-item label='附图' v-bind="formItemLayout">
        <a-upload
          :action="actionUrl"
          listType="picture-card"
          :fileList="fileListF"
          @preview="handlePreviewF"
          @change="handleChangeF"
          :headers="headers"
        >
          <div v-if="fileListF.length < 8">
            <a-icon type="plus"/>
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
        <a-modal :visible="previewVisibleF" :footer="null" @cancel="handleCancelF">
          <img alt="example" style="width: 100%" :src="previewImageF"/>
        </a-modal>

      </a-form-item>
      <a-form-item label='产品视频' v-bind="formItemLayout">
        <a-upload
          :action="actionUrl"
          :multiple="true"
          :fileList="fileListVideo"
          @preview="handlePreviewVideo"
          @change="handleChangeVideo"
          :headers="headers"
        >
          <div v-if='fileListVideo.length < 1'>
            <a-button>
              <a-icon type="upload" /> Upload
            </a-button>
          </div>
        </a-upload>
        <a-modal :visible="previewVisibleVideo" :footer="null" @cancel="handleCancelVideo">
          <img alt="example" style="width: 100%" :src="previewImageVideo"/>
        </a-modal>
      </a-form-item>
    </div>
  </div>
</template>

<script>
import db from '../../../../utils/localstorage'
import GlobalVariable from '../../../common/global_variable'
const formItemLayout = {
  labelCol: {span: 6},
  wrapperCol: {span: 18}
}
let user = db.get('USER')
let username = user.username
export default {
  name: 'editImg',
  data () {
    return {
      maaFile: this.imgData || {},
      arr: '',
      fileKeyM: '',
      fileKeyF: '',
      fileKeyV: '',
      actionUrl: GlobalVariable.preRequest + 'file/uploadQCloud',
      formItemLayout,
      thumbUrlM: '',
      thumbUrlF: '',
      thumbUrlV: '',
      headers: {
        Authentication: db.get('USER_TOKEN')
      },
      // 图片名称
      fileKeyStr: '',
      // 主图初始化
      previewVisibleM: false,
      previewImageM: '',
      fileListM: this.fileListMM || [],
      // 主图初始化结束
      // 附图初始化开始
      previewVisibleF: false,
      previewImageF: '',
      fileListF: this.fileListFF || [],
      // 附图初始化结束
      // 视频初始化开始
      previewVisibleVideo: false,
      previewImageVideo: '',
      fileListVideo: this.fileListVVideo || []
      // 视频初始化结束
    }
  },
  props: ['imgData', 'fileListFF', 'fileListMM', 'fileListVVideo'],
  watch: {
    'imgData' (val) {
      this.maaFile = val
    },
    'maaFile' (val) {
      console.log(val)
      this.$emit('update:imgData', val)
    },
    'fileListFF' (val) {
      this.fileListF = val
    },
    'fileListF' (val) {
      console.log(val)
      this.$emit('update:fileListFF', val)
    },
    'fileListMM' (val) {
      this.fileListM = val
    },
    'fileListM' (val) {
      console.log(val)
      this.$emit('update:fileListMM', val)
    },
    'fileListVVideo' (val) {
      this.fileListVideo = val
    },
    'fileListVideo' (val) {
      console.log(val)
      this.$emit('update:fileListVVideo', val)
    }
  },
  methods: {
    // 主图上传相关开始
    handleCancelM () {
      this.previewVisibleM = false
    },
    handlePreviewM () {
      this.previewImageM = this.thumbUrlM
      this.previewVisibleM = true
    },
    handleChangeM (info) {
      console.log(info)
      this.fileListM = info.fileList
      const file = info.file
      this.fileKeyM = file.name
      let code = ''
      if (file.hasOwnProperty('response')) {
        code = file.response.code
      }
      this.fileKeyM = (this.fileKeyM.indexOf('/' + username + '/') !== -1 ? (file.name) : ('/' + username + '/' + file.name))
      if (file.status === 'removed') {
        // 20002文件已存在 20001系统异常
        if (code === 20002 || code === 20001) {
        } else {
          console.log(this.fileKeyM)
          this.$api.goods.deleteFile(this.fileKeyM).then((r) => {
            console.log(this.fileKeyStr)
            this.fileKeyM = this.fileKeyStr.replace((this.fileKeyM + ','), '')
            console.log(this.fileKeyM)
            this.maaFile.maa19 = ''
          })
        }
      } else if (file.status === 'done' && code === 20002) {
        this.fileListM.splice(this.fileListM.indexOf(file), 1)
        this.$message.error('文件已存在,请更换后再试')
      } else if (file.status === 'done' && code === 20001) {
        this.fileListM.splice(this.fileListM.indexOf(file), 1)
        this.$message.error('系统繁忙,请稍后再试')
      } else if (file.status === 'done' && code === 200) {
        // 把图片名称传给state中
        this.maaFile.maa17 = this.fileKeyM
        this.fileListM = info.fileList
        this.fileKeyM = this.fileKeyStr + this.fileKeyM + ','
        this.thumbUrlM = 'https://mtt2019-1259412925.cos.ap-shanghai.myqcloud.com' + this.fileKeyM.replace(',', '')
        this.maaFile.maa19 = this.thumbUrlM
      }
    },
    // 主图上传相关结束

    // 附图上传相关开始
    handleCancelF () {
      this.previewVisibleF = false
    },
    handlePreviewF () {
      this.previewImageF = this.thumbUrlF
      this.previewVisibleF = true
    },
    // 附图
    handleChangeF (info) {
      console.log(info)
      let fileListF = [...info.fileList]
      this.fileListF = info.fileList
      const file = info.file // 图片列表
      this.fileKeyF = file.name // 图片名称+后缀
      let code = ''
      if (file.hasOwnProperty('response')) {
        code = file.response.code
        console.log(code)
      }
      if (file.status === 'removed') {
        console.log(file.status)
        if (code === 20002 || code === 20001) {
        } else {
          console.log(this.arr)
          this.$api.goods.deleteFile(this.fileKeyF).then((r) => {
            this.fileKeyStr = this.fileKeyStr.replace((this.fileKeyF + ','), '')
            this.fileKeyF = this.fileKeyStr
          })
        }
      } else if (file.status === 'done' && code === 20002) {
        this.$message.error('文件已存在,请更换后再试')
        this.fileListF.splice(this.fileListF.indexOf(file), 1)
        console.log(1111)
      } else if (file.status === 'done' && code === 20001) {
        this.fileListF.splice(this.fileListF.indexOf(file), 1)
        this.$message.error('系统繁忙,请稍后再试')
      } else if (file.status === 'done' && code === 200) {
        console.log(2222)
        fileListF.map((item) => {
          console.log(item)
          this.arr = (item.name.indexOf('/' + username + '/') !== -1 ? (this.arr + item.name + ',') : (this.arr + '/' + username + '/' + item.name + ','))
        })
        this.arr = this.arr.substr(0, this.arr.length - 1)
        console.log(this.arr)
        this.fileKeyF = this.arr
        this.maaFile.maa20 = this.fileKeyF
        this.fileListF = info.fileList
        this.fileKeyStr = this.fileKeyStr + this.fileKeyF + ','
        this.fileKeyF = this.fileKeyStr
        this.thumbUrlF = 'https://mtt2019-1259412925.cos.ap-shanghai.myqcloud.com' + this.fileKeyF.replace(',', '')
      }
    },
    // 附图上传相关结束
    // 视频上传相关开始
    handleCancelVideo () {
      this.previewVisibleVideo = false
    },
    handlePreviewVideo () {
      this.previewImageVideo = this.thumbUrlV
      this.previewVisibleVideo = true
    },
    // 产品视频
    handleChangeVideo (info) {
      this.fileListVideo = info.fileList
      var file = info.file
      this.fileKeyV = file.name
      let code = ''
      if (file.hasOwnProperty('response')) {
        code = file.response.code
      }
      this.fileKeyV = (this.fileKeyV.indexOf('/' + username + '/') !== -1 ? (file.name) : ('/' + username + '/' + file.name))
      if (file.status === 'removed') {
        // 20002文件已存在 20001系统异常
        if (code === 20002 || code === 20001) {
        } else {
          this.$api.goods.deleteFile(this.fileKeyV).then((r) => {
            console.log(this.fileKeyV)
            this.fileKeyStr = this.fileKeyStr.replace((this.fileKeyV + ','), '')
            this.fileKeyV = this.fileKeyStr
          })
        }
      } else if (file.status === 'done' && code === 20002) {
        this.fileListVideo.splice(this.fileListVideo.indexOf(file), 1)
        this.$message.error('文件已存在,请更换后再试')
      } else if (file.status === 'done' && code === 20001) {
        this.fileListVideo.splice(this.fileListVideo.indexOf(file), 1)
        this.$message.error('系统繁忙,请稍后再试')
      } else if (file.status === 'done' && code === 200) {
        this.maaFile.maa18 = this.fileKeyV
        this.fileListVideo = info.fileList
        this.fileKeyStr = this.fileKeyStr + this.fileKeyV + ','
        this.fileKeyV = this.fileKeyStr
        this.thumbUrlV = 'https://mtt2019-1259412925.cos.ap-shanghai.myqcloud.com' + this.fileKeyV.replace(',', '')
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>
